<template>

    <div class="labelListRadio">
        <div class="float_right width_50px pointer more" @click="toggleMore">
            更多
          </div>
        <div class="margin_right_50 label_container">
            <ul class="label_ul" :class="{show_one_line:isShowMore}">
                <li class="label_ul_li" @click="selectLabel(item.AMPID,index,$event)" v-for="(item,index) in labelList">
                    <span :class="{active: item.AMPID==activeIndex}">{{item.AMPName}}</span>
                </li>
            </ul>
            <div class="clear_both"></div>
        </div>

    </div>

</template>
<script>
    // 发送ajax 请求的组件
    import getData from '../../../api/getData'

    var firstLabelRadioLogic = {
        getOneAuthorAction: function (vueObj) {
            getData.post("getOneAuthor", {}).then(function (response) {
                vueObj.labelList = $.extend(true, {}, response.data.data);
                vueObj.activeIndex = vueObj.labelList[0].AMPID;
                vueObj.$emit("init-ok",vueObj.labelList[0],0);
            })
            .catch(function (response) {
                console.log(response);
            });
        }
    };

    export default {
        data: function () {
            return {

                // 当前选中的索引
                activeIndex : 9999999,
                // 是否显示所有,默认是不显示所有的，及超过一行，则隐藏
                isShowMore:false,
                labelList:[]
            }
        },
        computed: {
        },
        // 组件初始化完成执行的方法
        mounted: function () {
            firstLabelRadioLogic.getOneAuthorAction(this);
        },
        methods: {
            // 点击选中的标签
            selectLabel: function(key,index,myevent){
                this.activeIndex = key;
                this.$emit("select-label",this.labelList[index]);
            },
            // 切换是否显示更多
            toggleMore : function(){
                this.isShowMore = !this.isShowMore;
            }
        }
    }
</script>

<style scoped lang="scss">
    .labelListRadio {
        .more{
            position: relative;
            z-index: 99;
        }

        line-height: 35px;
        .label_container{
            position: relative;
            background: #fafafa;
            padding: 0 20px;
            margin: 20px 0;

            .label_ul{
                list-style: none;

                &.show_one_line{
                    height: 35px;
                    overflow: hidden;
                }

                .label_ul_li{
                    cursor: pointer;
                    float: left;
                    margin-right: 15px;

                    span{
                        &:hover{
                            /*color:red;*/
                        }
                        &.active{
                            background: #6dcef0;
                            padding: 3px 10px;;
                            border-radius: 2px;
                            color: #fff;
                        }
                    }
                }

            }
        }


    }
</style>
